<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
	<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<style>
		.mui-content{
			text-align: center;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">标题</h1>
	</header>
	<div class="mui-content" id="app">
		<div style="height: 20px;">
			
		</div>
		<div  v-test:msg.a.b="message">
			666
		</div>
		<componet-test></componet-test>
		<script type="text/x-template" id="componet-test-template">
			<div>
				 <button type="button" @click="goTest()">点击测试</button>
			</div>
		</script>
		
	</div>
	
	<script type="text/javascript">
		
		//自定义组件
		Vue.component('componet-test',{
			template:"#componet-test-template",
			methods:{
				goTest:function(){
					console.log("~~~~");
				}
			}
			
		})
		
		//自定义指令 
		Vue.directive("test",{
			
			bind:function(el,binding,vnode){
				
			}
			
		})
		
		
		var vm = new Vue({
			el:"#app",
			data:{
				message:"some text"
			},
			mounted:function(){
				
			},
			methods:{
				
			}
		}) 
	</script>
</body>
</html>